<template>
  <div class="classlist">
<header>
      <span>
        <span>班级名称</span>
        <el-input v-model="classname" placeholder="请输入关键字" style="width:200px"></el-input>
      </span>
       <span>
        <span>所属学院</span>
          <el-select v-model="college" placeholder="请选择">
          <el-option
            v-for="item in collegeOptions"
            :key="item.key"
            :label="item.school"
            :value="item.school">
          </el-option>
        </el-select>
      </span>
      <span>
        <span>课程阶段</span>
        <el-select v-model="classstage" placeholder="请选择">
          <el-option
            v-for="item in stageOptions"
            :key="item.key"
            :label="item.lesson"
            :value="item.key">
          </el-option>
        </el-select>
      </span>
    </header>
   <div style="textAlign:right;width:100%;margin:20px auto">
      <p style="width:100%"> <el-button type="primary" icon="el-icon-search" @click="searchAll" >搜索</el-button>
      </p>
    
     <div style="height:1px; width:100%;background:#EBEEF5"></div>
        <p><el-button type="text"  @click="$router.push({path:'/classadd'})"  style="padding-right:20px" class="border_h">添加班级</el-button></p>
      </div>
    <div>
     <el-table :data="classList.slice((currentPage-1)*pageSize,currentPage*pageSize)" style="width: 100%;"
      :header-cell-style="{background:'#EBEEF5'}"
      >
      <el-table-column prop="date" label="班级名称" >
        <template slot-scope="scope">{{scope.row.classname}}</template>
      </el-table-column>
      <el-table-column prop="date" label="所属学院" >
        <template slot-scope="scope">{{scope.row.shoolid}}</template>
      </el-table-column>
       <el-table-column prop="date" label="代班讲师" >
        <template slot-scope="scope">{{scope.row.teacherid}}</template>
      </el-table-column>
      <el-table-column prop="date" label="辅导员" >
        <template slot-scope="scope">{{scope.row.coachid}}</template>
      </el-table-column>
      
      <el-table-column prop="date" label="课程阶段" >
          <template slot-scope="scope">
      <el-tag type="success" >{{
            stageOptions.filter(item=>item.key*1===scope.row.courseid*1)[0]?stageOptions.filter(item=>item.key*1===scope.row.courseid*1)[0].lesson:null
           }}</el-tag>
      </template>
      </el-table-column>
      <el-table-column prop="date" label="开课日期" >
        <template slot-scope="scope">{{$getDate(scope.row.startime)}}</template>
      </el-table-column>
       <el-table-column prop="date" label="结课日期" >
        <template slot-scope="scope">{{$getDate(scope.row.endtime)}}</template>
      </el-table-column>
      <el-table-column prop="date" label="班级人数" >
        <template slot-scope="scope">{{scope.row.classnum}}</template>
      </el-table-column>
      <el-table-column prop="date" label="操作" >
        <template slot-scope="scope">
        <el-button type="text" style="color:orange" @click="godetail(scope.row.classid)">课堂情况</el-button>
        <el-button type="text" @click="lookLog(scope.row.classid)">记录</el-button>    
       <el-button v-if="scope.row.endtime==''||scope.row.startime*1<scope.row.endtime*1" type="text" @click="Black(scope.row.classname,scope.row.shoolid,scope.row.classid)" style="color:grey">结课</el-button>
       <el-button v-else type="text" @click="classStart(scope.row.classid)" >开课</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <div class="pagination_m">
       <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5,6,8]" 
          :page-size="pageSize"        
          layout="total, sizes, prev, pager, next, jumper"
          :total="classList.length">   
      </el-pagination>
    </div>
    </div>
<!-- 开课 -->
    <div>
      <el-dialog title="一键开课" :visible.sync="dialogTableVisible" id="dialog" >
        <div class="">
            <div class="iptDives">
              <span style="width:123px">课程阶段</span>
              <el-select v-model="startStage" placeholder="请选择课程阶段" style="width:300px" >
                <el-option
                  v-for="item in stageOptions"
                  :key="item.key"
                  :label="item.lesson"
                  :value="item.key">
                </el-option>
              </el-select>
            </div>
            <div class="iptDives">
              <span style="width:123px">辅导员：</span>
              <el-select v-model="startCoach" placeholder="请选择辅导员" style="width:300px" >
               <el-option
                  v-for="item in coachArr"
                  :key="item.userid"
                  :label="item.name"
                  :value="item.userid">
                </el-option>
              </el-select>
            </div>
            <div class="iptDives">
              <span style="width:123px">班级类型：</span>
              <el-select v-model="startNum" placeholder="请选择班级人数" style="width:300px" >
                <el-option
                  v-for="item in classType"
                  :key="item.key"
                  :label="item.key+'('+item.num+'人)'"
                  :value="item.num">
                </el-option>
              </el-select>
            </div>
            <div class="iptDives">
              <span style="width:123px">开课时间：</span>
              <el-date-picker
                v-model="startTime"
                align="right"
                type="date"
                placeholder="选择日期"
                :picker-options="pickerOptions">
              </el-date-picker>
            </div>
            <div class="btnDiv">
                 <el-button  type="primary" @click="dialogTableVisible = false;startCoach='';startTime='';
            startNum='';startStage=''">取消</el-button>
                 <el-button  type="primary" @click="changeClass">确认</el-button>
            </div>
        </div>
    </el-dialog>
    </div>
    <el-dialog title="课堂记录" :visible.sync="LogTableVisible" id="classLog" >
      <div v-if="!logArr.length" >暂无记录</div>
      <div v-else v-for="(item,index) in logArr" :key="index" id="logDiv">
        <div style="background:  #ccc;color:#fff;padding-left:13px;font-size:16px">第{{index+1}}条</div>
           <div class="iptDives">
              <span class="grey">班级人数：</span>
              <span >{{item.classnum}}</span>
              <span class="grey">所属学院：</span>
              <span>{{item.schoolid}}</span>
              <span class="grey">开始时间：</span>
              <span>{{$getDate(item.startime)}}</span>
              <span class="grey">结束时间：</span>
              <span>{{$getDate(item.endtime)}}</span>
          </div>
         
      </div>
      <div class="btnDiv">
          <el-button  type="primary" @click="LogTableVisible = false;">关闭</el-button>  
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        pageSize:5,
        currentPage:1,
        classname:'',
        classList:[],
        options:[],
        stageOptions:[],
        classstage:'',
        college:'',
        collegeOptions:[],
        teacherArr:[],
        coachArr:[],
        classType:[
          {
          key:'大班',
          num:'50'
        },{
          key:'中班',
          num:'30'
        },{
          key:'小班',
          num:'10'
        }],
        dialogTableVisible:false,
        LogTableVisible:false,
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '一周后',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() + 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        startCoach:'',
        startTime:'',
        startNum:'',
        startStage:'',
        classId:'',
        logArr:[],
      };
    },
      
    mounted(){this.setList()},
    methods:{
      setList(){
        this.$httpAxios(this.$api.class_List(),res=>{
              let data = res.data
              this.classList=data.data;
              this.coachArr =data.instructor 
        })
        this.$httpAxios(this.$api.class_Sel(),res=>{
            this.stageOptions = res.data.lesson
            this.collegeOptions = res.data.school
        })
    },
    godetail(classid){
      sessionStorage.classid = classid
      this.$router.push('/classsituation')
    },
    classStart(id){
      this.classId = id
      this.dialogTableVisible = true
    },
    lookLog(classid){//查看记录
      this.LogTableVisible = true
      this.$httpAxios(this.$api.class_Log({classid}),res=>{
          // if(!res.data.length){ return document.getElementById.logDiv.innerHTML = 'logDiv'}
          this.logArr = res.data
          
      })
    },
    orderUnti(){},
     parseTime(str){//处理时间选择器
      var d = new Date(str); 
      let time=d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds();  
      let  a= new Date(time)
          return a.getTime()
    },
    changeClass(){//确认开课
      const {startCoach,startTime,startNum,startStage,dialogTableVisible,classId,$message} = this
       if(startStage=== '') return $message('请选择课程阶段')
       if(startCoach === '') return $message('请选择辅导员')
       if(startNum=== '') return $message('请选择班级人数')
       if(startTime=== '') return $message('请选择开课时间')
     
      let obj = {
            classid:classId,
            coachid:startCoach+'',
            startime:this.parseTime(startTime),
            classnum:startNum+'',
            courseid:startStage+''
      }
   
      this.$httpAxios(this.$api.class_Start({obj}),res=>this.setList())
      this.dialogTableVisible = false;this.startCoach='';this.startTime='';this.startNum='';this.startStage=''
    },
    searchAll(){
      const {college,classname,classstage} = this
      let obj = {classname:classname+'',shoolid:college+'',courseid:classstage+''}
     
       this.$httpAxios(this.$api.class_Search(obj),res=>this.classList = res.data)
    },
    // 分页器
    handleCurrentChange(currentPage) {this.currentPage = currentPage;},
    // 每张显示的个数
    handleSizeChange(size){this.pageSize = size;},
    go(shoolid){
      this.$router.push({path:'/classsituation',query:{shoolid}})
      
    },
    Black(classname,stage,id){
      this.$confirm(`您确定要结束当前 ${classname} 班级的 ${stage} 课程`, {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }) .then(() => {
            this.$httpAxios(this.$api.class_End({classid:id}),res=>{
                this.$message.success(res.msg);  
                this.setList()
            })
        }).catch(() => {this.$message({type: 'info',message: '已取消'});});
    }
    }
  };
</script>

<style  scoped>
#dialog,#classLog{
  width:80%;
  margin:auto
}
.edituser_span{
  width: 150px;
}
.iptDives{
  display: flex;
  margin: 10px auto;
  
}
.btnDiv{
    width:100%;
    text-align: right;
}
#classLog .iptDives{
  display: flex;
  margin: 10px auto;
  background:  #f6f6f6;
}
#classLog .iptDives span{
  display: inline-block;
  width:25%;
  text-align: center;
  
}
.btnDiv{
    width:100%;
    text-align: right;
}
.el-dialog__header{
  background: red
}
.grey{color: grey   ;}
</style>